import { Component, OnInit,Input,OnChanges, SimpleChanges } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { FormComponent } from './form.component';

@Component({
  selector: 'el-form-item',
  templateUrl: './form-item.component.html',
  styleUrls: ['../theme/form-item.css']
})
export class FormItemComponent implements OnChanges {
    root:any;
    private sanitizer:any;
    @Input() status: string = '';
    @Input() error: string = '';
    @Input() label: string = '';
    @Input() size: string = '';
    @Input() required: boolean = false;
    @Input('label-width') labelWidth: string = '';
    @Input('show-message') showMessage: boolean = true;
    @Input('inline-message') inlineMessage: boolean = false;
    statusSubscriber: Array<(status: string) => void> = [];

  constructor(root: FormComponent, sanitizer: DomSanitizer) { 
    this.root = root;
    this.sanitizer = sanitizer;
  }


  ngOnInit(): void {
  }

  showMessageEl() {
    if (this.status !== 'error')
            return false;
        return this.error && this.showMessage && this.root.showMessage;
  }

  isInlineMessage(){
    var /** @type {?} */ notDefault = typeof this.inlineMessage === 'boolean';
        return notDefault ? this.inlineMessage : this.root.inlineMessage;
  }

  makeSize(){
    var /** @type {?} */ appointed = this.size || this.root.size || '';
        return appointed ? " el-form-item--" + appointed + " " : '';
  }

  makeLabelStyle(){
    var /** @type {?} */ width = this.labelWidth || this.root.labelWidth || null;
    var /** @type {?} */ styles = width && this.root.labelPosition !== 'top' ? "width: " + width + ";" : '';
    return this.sanitizer.bypassSecurityTrustStyle(styles);
  }

  makeContentStyle(){
    var /** @type {?} */ skipStyle = (this.root.labelPosition === 'top' || this.root.inline)
            || (!this.label && !this.root.labelWidth);
        if (skipStyle)
            return this.sanitizer.bypassSecurityTrustStyle('');
        var /** @type {?} */ width = this.labelWidth || this.root.labelWidth;
        var /** @type {?} */ styles = "margin-left: " + width + ";";
        return this.sanitizer.bypassSecurityTrustStyle(styles);
  }

  ngOnChanges(changes:SimpleChanges){
    if (!this.root.showIcon)
            return;
        if (!changes || !changes.status)
            return;
        this.statusSubscriber.forEach(function (sub) {
            sub(changes.status.currentValue);
        });
  }
}
